@import "../../../../../common/_utils/style/mixins/mixins.scss";
@include b(pan) {
  &.mapboxgl-ctrl {
    margin: 10px 0 0 0px !important;
  }
  width: 62px;
  height: 63px;
  position: relative;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 62px;
  min-height: 63px;
  max-width: 124px;
  max-height: 126px;
  @include m(default) {
    background-image: url("#{$--pan-assets-path}/pan.png");
  }
  @include m(east) {
    background-image: url("#{$--pan-assets-path}/pan-east.png");
  }
  @include m(west) {
    background-image: url("#{$--pan-assets-path}/pan-west.png");
  }
  @include m(north) {
    background-image: url("#{$--pan-assets-path}/pan-north.png");
  }
  @include m(south) {
    background-image: url("#{$--pan-assets-path}/pan-south.png");
  }
  @include e(center) {
    width: 27%;
    height: 27%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url("#{$--pan-assets-path}/pan.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  @include e(icon) {
    // width: 21px;
    // height: 21px;
    padding: 0;
    cursor: pointer;
    @include when(left) {
      position: absolute;
      top: 50%;
      height: 36%;
      left: 8%;
      width: 25%;
      transform: translateY(-50%);
    }
    @include when(right) {
      position: absolute;
      top: 50%;
      right: 8%;
      width: 25%;
      height: 36%;
      transform: translateY(-50%);
    }
    @include when(top) {
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translateX(-50%);
      width: 36%;
      height: 25%;
    }
    @include when(bottom) {
      position: absolute;
      bottom: 8%;
      left: 50%;
      transform: translateX(-50%);
      width: 36%;
      height: 25%;
    }
  }
}
